import React, { Component } from 'react';
import {StyleSheet,Text,View,Image, FlatList} from 'react-native';
import { thisExpression } from '@babel/types';

export default class NewsList extends Component{
  static navigationOptions = {
    title: '新闻列表',
  };

  constructor(props){
    super(props);
    this.state = {
      newslist: [],
    }
  }
  
  componentWillMount(){
    this.getNewsList()
  }

  render(){
    return <FlatList 
            data={this.state.newslist}
            keyExtractor={(item,i)=>i}
            renderItem={({item}) => this.renderItem(item)}
            ItemSeparatorComponent={this.renderSeparator}   
      ></FlatList>

    // <View>
    //   {
    //     this.state.newslist.map((item,i)=>{
    //       return <View key={i} >
    //         <Text>{item.title}</Text>
    //         <View>
    //           <Text>发表时间：{item.add_time}</Text>
    //           <Text>点击次数：{item.click}</Text>
    //         </View>
    //       </View>
    //     })
    //   }
    // </View>

  }

  getNewsList=()=>{
    fetch('http://www.xyfight.com/api/getnewslist')
      .then(res=>res.json())
      .then(mydata=>{
        
        this.setState({
          newslist: mydata.message
        })
      })
  }

  renderItem=(item)=>{
    return <View style={styles.nlistbox}>
      <View style={{flex:1}}>
        <Image source={{uri: 'http://www.xyfight.com/images/cateimg/girl1.jpg'}} style={{width:100,height:100}}></Image>
      </View>
       <View style={styles.nl_text}>
        <Text style={styles.nl_title} onPress={()=>{this.props.navigation.navigate('NewsInfo',{id:item.id})}}
          
          >{item.title}</Text>
         <Text>发表时间：{item.add_time}</Text>
         <Text>点击次数：{item.click}</Text>
       </View>
     </View>
  }

  renderSeparator=()=>{
    return <View style={{borderTopColor:'#ccc', borderTopWidth:1,marginLeft:10,marginRight:10}}></View>
  }

}

const styles = StyleSheet.create({
  nlistbox: {
    padding:10,
    flexDirection: "row",
    justifyContent:'space-around'
  },
  nl_title: {
    color: 'blue',
    fontSize:20
    
  },
  nl_text:{
    justifyContent:'space-around',
    flex:2
  }
})